{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- 引入核心的css文件 -->
    <link href="{% static "layui/css/layui.css" %}" rel="stylesheet" media="all">
    <!-- 引入核心的js文件-->
    <script src="{% static "layui/layui.js" %}"></script>
    <script src="{% static "js/jquery-3.6.1.js" %}"></script>
    <script src="{% static "js/jquery-3.6.1.min.js" %}"></script>

    <style>

        /* 数据概览 */
        .layui-dvbt1 {
            height: 500px !important;
        / / 提高指定样式规则的应用优先权 !important background-color: #fff;
        }


        /* 控制台效果报告 */
        .layui-trs {
            padding-top: 5px;
        }

        .layui-trs .layui-progress {
            margin: 50px 0 60px;
        }

        .layui-trs .layui-progress:last-child {
            margin-bottom: 10px;
        }

        .layui-trs .layui-progress h3 {
            position: absolute;
            right: 0;
            top: -35px;
            color: #999;
            font-size: 14px;
        }

        .layui-trs .layui-progress-bar {
            text-align: left;
        }

        .layui-trs .layui-progress-text {
            top: -35px;
            line-height: 26px;
            font-size: 26px;
        }


        /* gg */


        body {

            background: #fff;
            background-size: cover;
        }

        div {
            box-sizing: border-box;
        }

        .clearfix {
            clear: both;
        }

        .container-header {
            width: 100%;
            height: 74px;
            text-align: center;
            box-sizing: border-box;
        }


        .container-header .location {
            position: absolute;
            right: 17px;
            top: 46px;
        }

        .location i {
            font-size: 18px;
            font-weight: 800;
            color: #7e9bc6;
        }

        .location span {
            font-size: 20px;
            line-height: 30px;
            color: #168fcd;
        }

        .container-header h3 {
            position: absolute;
            top: 20px;
            left: 800px; /* 修改 标题 是否在 中间显示 */
            line-height: 2px;
            font-size: 1.3vw;
            font-weight: 400;
            color: #fa0606;

        }

        /* 边角 */

        .left-top,
        .right-top,
        .left-bottom,
        .right-bottom {
            position: absolute;
            width: 13px;
            height: 13px;
        }

        .left-top {
            left: 0;
            top: 0;
            border-left: solid 2px #045291;
            border-top: solid 2px #045291;
        }

        .right-top {
            right: 0;
            top: 0;
            border-right: solid 2px #045291;
            border-top: solid 2px #045291;
        }

        .left-bottom {
            left: 0;
            bottom: 0;
            border-left: solid 2px #045291;
            border-bottom: solid 2px #045291;
        }

        .right-bottom {
            right: 0;
            bottom: 0;
            border-right: solid 2px #045291;
            border-bottom: solid 2px #045291;
        }

        .resource-right .com-count-title {
            font-size: 16px;
            margin-left: 10px;
        }

        .com-count-title {
            color: #1bb4f9;
            padding: 20px;
            font-size: 22px;
        }

        .com-screen-content {
            width: 100%;
            height: auto;
        }

        .com-screen-content2 {
            width: 100%;
            height: auto;
        }

        .filter-type {
            font-size: 0;
        }

        .filter-type li:hover {
            cursor: pointer;
        }

        .filter-type li {
            display: inline-block;
            width: 120px;
            line-height: 40px;
            font-family: myFirstFont;
            font-size: 20px;
            text-align: center;
            color: #024f9b;
            border: solid 1px #075797;
            background: #0d2343;
        }

        .filter-type li.active {
            color: white;
            background: #0c182d;
            border: solid 1px #1bb9f9;
        }

        .container-content {
            padding: 10px 20px;
            box-sizing: border-box;
        }

        .count-base,
        .count-resource,
        .count-share,
        .count-topic {
            position: relative;
            padding: 20px;
            margin-top: 10px;
            box-sizing: border-box;
        }

        .com-count-title {
            color: #1bb4f9;
            font-size: 18px;
            padding: 0;
        }

        .count-base {
            margin-left: 10px;
            float: left;
            /*浮动*/
            width: 32%;
            height: 350px;
            background: center no-repeat;
            background-size: cover;
        }

        .count-resource {
            margin-left: 10px;
            float: left;
            width: 32%;
            height: 350px;
            background: center no-repeat;
            background-size: cover;
        }

        .count-share {
            margin-left: 10px;
            float: left;
            width: 48.4%;
            height: 350px;
            background: center no-repeat;
            background-size: cover;
        }

        .count-topic {
            margin-left: 10px;
            float: left;
            width: 48.4%;
            height: 350px;
            background: center no-repeat;
            background-size: cover;
        }

        .data-label {
            position: absolute;
            top: 20px;
            right: 10px;
        }

        .data-label li {
            float: left;
            width: 120px;
            text-align: center;
            font-size: 18px;
            color: #828c9d;
        }

        .data-label li:hover,
        .data-label li.active {
            color: #ea0808;
            background: center no-repeat;

        }


        /* author lyc */

        * {
            margin: 0px;
            padding: 0px;
            font-family: '微软雅黑';
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        li {
            list-style: none
        }

        img {
            border: none
        }

        a {
            text-decoration: none;
        }

        .topRec_List dl,
        .maquee {
            width: 90%;
            overflow: hidden;
            margin: 0 auto;
            color: #f0ece2
        }

        .topRec_List dd {
            float: left;
            text-align: left;
            border-bottom: 1px solid #1B96EE;
            color: #1B96EE;
            font-size: 14px;
        }

        .topRec_List dl dd:nth-child(1) {
            width: 30%;
            height: 40px;
            line-height: 40px;
        }

        .topRec_List dl dd:nth-child(2) {
            width: 20%;
            height: 40px;
            line-height: 40px;
        }

        .topRec_List dl dd:nth-child(3) {
            width: 20%;
            height: 40px;
            line-height: 40px;
        }

        .topRec_List dl dd:nth-child(4) {
            width: 30%; /*  这几个值 加起来 为  100% */
            height: 40px;
            line-height: 40px;
        }

        .maquee {
            height: 195px;
        }

        .topRec_List ul {
            width: 100%;
            height: 195px;
        }

        .topRec_List li {
            width: 100%;
            height: 38px;
            line-height: 38px;
            text-align: left;
            font-size: 12px;
            color: #76dbd1
        }

        /*.topRec_List li:nth-child(2n){ background:#077cd0}*/

        .topRec_List li div {
            float: left;
        }

        .topRec_List li div:nth-child(1) {
            width: 30%;
        }

        .topRec_List li div:nth-child(2) {
            width: 20%;
        }

        .topRec_List li div:nth-child(3) {
            width: 20%;
        }

        .topRec_List li div:nth-child(4) {
            width: 30%; /*  这几个值 加起来 为  100% */
        }

        .use-data {
            text-align: center;
            padding: 2px 0;
            margin-top: 3%;
            height: 5%;
            background: center no-repeat;
            background-size: cover;
            border: solid 1px #093552;
            border-right: 0px;
            border-left: 0;
        }

        .use-data li {
            width: 30%;
            font-size: 0;
            display: inline-table;
            border-right: solid 1px #1f4191;
        }

        .use-data li:last-child {
            border-right: 0;
        }

        .use-data .data-count {
            color: #f51111;
            font-family: myFirstFont;
            height: 1%;
            font-size: 16px;
        }

        .use-data .data-name {
            color: #1bb9f9;
            font-size: 16px;
        }


        .container-header .nowTime {
            position: absolute;
            left: 20px;
            top: 41px;
            font-size: 0;
        }

        .container-header .nowTime li {
            display: inline-block;
            width: 300px;
            height: 40px;
            font-size: 30px;
            color: #fff;
        }

        .nowTime li {
            display: inline-block;
            float: left;
            /*font-weight: 800;*/
            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .nowTime li div {
            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 20px;
            text-align: left;
        }

        .nowTime li p {
            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 16px;
        }


        .box {
            width: 100%;
            height: 100%;

            overflow: hidden;
        }

        ul1 {
            width: 200px;
            height: 40px;
            margin-left: -1px;
            list-style: none;

        }

        li1 {
            float: right;
            width: 120px;
            height: 30px;
            text-align: center;
            font: 600 18px/40px "simsun";
            background-color: pink;
            cursor: pointer;
            margin-top: -2px;
        }

        span1 {
            display: none;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            text-align: center;
            font: 700 50px/80px "simsun";
        }

        .show {
            display: block;
        }

        .current {
            background-color: yellow;
        }



        #fullScreenMask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 9999999;    /* z-index为9999，最上层 */
            background-color: #ffffff;
        }


        #fullScreen {
            width: 100%;
            height: 100%;
        }

    </style>
    <script>
        window.onload = function () {
            //需求：鼠标放到上面的li上，li本身变色(添加类)，下方对应的span也显示出来(添加类);
            //思路：1.点亮上面的盒子。   2.利用索引值显示下面的对应的盒子。

            //1、获取所有的box
            var boxArr = document.getElementsByClassName("box");

            //让每一个box都调用函数
            for (var i = 0; i < boxArr.length; i++) {
                fn(boxArr[i]);
            }

            function fn(element) {
                var liArr = element.getElementsByTagName("li1");   //注意，是element获取事件源，不是document获取事件源
                var spanArr = element.getElementsByTagName("span1");
                //2.绑定事件（循环绑定）
                for (var i = 0; i < liArr.length; i++) {
                    //绑定索引值(自定义属性)
                    liArr[i].setAttribute("index", i);
                    liArr[i].onmouseover = function () {
                        //3.书写事件驱动程序（排他思想）
                        //1.点亮盒子。   2.利用索引值显示盒子。(排他思想)
                        for (var j = 0; j < liArr.length; j++) {
                            liArr[j].removeAttribute("class");    //注意，这里是class，不是className
                            spanArr[j].removeAttribute("class");
                        }
                        this.setAttribute("class", "current");
                        spanArr[this.getAttribute("index")].setAttribute("class", "show");
                    }
                }
            }
        }
    </script>
</head>
<body>


<div class="layui-fluid">


    <!--全屏显示的容器-->
    <div id="fullScreenMask">
        <div id="fullScreen"></div>
    </div>

    <div class="container-header">
        <ul class="nowTime">
            <li>
                <div id="time"></div>
            </li>
        </ul>

        <h3>echarts 测试demo</h3>

        <svg width="1900" height="80">
            <polyline fill="transparent" stroke-width="3"
                      points="0,16 343.8,16 382,32 477.5,32 515.7,48 1375.2,48 1432.5,32 1528,32 1566.1999999999998,16 1910,16"
                      stroke="#85A5F4">
                <animate attributeName="stroke-dasharray" attributeType="XML"
                         from="0, 960.9191501911595, 0, 960.9191501911595" to="0, 0, 1921.838300382319, 0" dur="4s"
                         begin="0s" calcMode="spline" keyTimes="0;1" keySplines="0.4,1,0.49,0.98"
                         repeatCount="indefinite"></animate>
            </polyline>
            <polyline fill="transparent" stroke-width="2" points="573,64 1337,64" stroke="#5A77BA">
                <animate attributeName="stroke-dasharray" attributeType="XML" from="0, 382, 0, 382"
                         to="0, 0, 764, 0" dur="4s" begin="0s" calcMode="spline" keyTimes="0;1"
                         keySplines=".4,1,.49,.98" repeatCount="indefinite"></animate>
            </polyline>
        </svg>


    </div>

    <div class="container-content">
        <div class="top">
            <div class="count-base">
                <div class="com-count-title">资源总量构成</div>
                <div class="com-screen-content">

                    <div id="main1" style="width:100%;height:300px;">

                    </div>
                </div>
                <span class="left-top"></span>
                <span class="right-top"></span>
                <span class="left-bottom"></span>
                <span class="right-bottom"></span>
            </div>


            <div class="count-resource ">
                <div class="com-count-title">资源总量统计</div>
                <div class="com-screen-content2">
                    <ul class="use-data">
                        <li>
                            <p class="data-count">15681 </p>
                            <span class="data-name">数据总量</span>
                        </li>
                        <li>
                            <p class="data-count"> 1731</p>
                            <span class="data-name">更新量</span>
                        </li>
                        <li>
                            <p class="data-count">11753</p>
                            <span class="data-name">共享次数</span>
                        </li>
                    </ul>
                    <div class="com-screen-content">
                        <div id="main2" style="margin-top:10px;width:100%;height:240px;"></div>
                    </div>
                    <span class="left-top"></span>
                    <span class="right-top"></span>
                    <span class="left-bottom"></span>
                    <span class="right-bottom"></span>
                </div>
            </div>

            <div class="count-resource ">
                <div class="com-count-title">基础库统计</div>

                <div class="com-screen-content">

                    <div class="box">
                        <ul1>
                            <li1 class="current">test1</li1>
                            <li1>test2</li1>
                            <li1>test3</li1>

                        </ul1>
                        <span1 class="show">
                            <div id="main3" style="margin-top:10px;width:100%;height:300px;"></div>
                        </span1>
                        <span1>
                            <div id="main33" style="margin-top:10px;width:580px;height:300px;"></div>
                        </span1>    <!-- 可能需要手动 调 高宽度 -->
                        <span1>
                            <div id="main333" style="margin-top:10px;width:580px;height:270px;"></div>
                        </span1>

                    </div>


                </div>
                <span class="left-top"></span>
                <span class="right-top"></span>
                <span class="left-bottom"></span>
                <span class="right-bottom"></span>
            </div>
        </div>


        <div class="mid">
            <div class="count-share w1">
                <div class="com-count-title">数据共享次数</div>
                <div class="com-screen-content">
                    <div class="topRec_List">
                        <dl>
                            <dd>资源名称</dd>
                            <dd>调用方</dd>
                            <dd>调用时间</dd>
                            <dd>调用时间</dd>
                        </dl>
                        <div class="maquee">
                            <ul>

                                <li>
                                    <div>审计局主要职责</div>
                                    <div>审计局</div>
                                    <div>08:20:26</div>
                                    <div>08:20:26</div>
                                </li>
                                <li>

                                    <div>残联主要职责</div>
                                    <div>残联</div>
                                    <div>08:20:36</div>
                                    <div>08:20:26</div>
                                </li>
                                <li>

                                    <div>委老干部局主要职责</div>
                                    <div>老干部局</div>
                                    <div>08:20:46</div>
                                    <div>08:20:26</div>
                                </li>
                                <li>
                                    <div>公安局主要职责</div>
                                    <div>公安局</div>
                                    <div>08:20:56</div>
                                    <div>08:20:26</div>
                                </li>
                                <li>
                                    <div>民政局主要职责</div>
                                    <div>民政局</div>
                                    <div>08:21:04</div>
                                    <div>08:20:26</div>
                                </li>
                                <li>
                                    <div>交通运输局主要职责</div>
                                    <div>交通运输局</div>
                                    <div>08:21:07</div>
                                    <div>08:20:26</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <span class="left-top"></span>
                <span class="right-top"></span>
                <span class="left-bottom"></span>
                <span class="right-bottom"></span>
            </div>


            <div class="count-share w2">
                <div class="com-count-title">数据共享次数</div>
                <div class="com-screen-content">
                    <div id="main5" style="width:100%;height:300px;">


                    </div>
                </div>
                <span class="left-top"></span>
                <span class="right-top"></span>
                <span class="left-bottom"></span>
                <span class="right-bottom"></span>
            </div>
        </div>


        <div class="btm">
            <div class="count-topic e1">
                <div class="com-count-title">主题库统计</div>
                <div class="com-screen-content">
                    <div id="main6" style="width:100%;height:300px;">

                    </div>
                </div>
                <span class="left-top"></span>
                <span class="right-top"></span>
                <span class="left-bottom"></span>
                <span class="right-bottom"></span>
            </div>

            <div class="count-topic e2">
                <div class="com-count-title">主题库共享次数</div>
                <div class="com-screen-content">
                    <div id="main7" style="width:100%;height:300px;">

                    </div>
                </div>
                <span class="left-top"></span>
                <span class="right-top"></span>
                <span class="left-bottom"></span>
                <span class="right-bottom"></span>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>


</div>


<script type="text/javascript">
    function autoScroll(obj) {
        $(obj).find("ul").animate({
            marginTop: "-39px"
        }, 500, function () {
            $(this).css({
                marginTop: "0px"
            }).find("li:first").appendTo(this);
        })
    }

    $(function () {
        setInterval('autoScroll(".maquee")', 2000);
    })


</script>

<script>

    //顶部时间
    function getTime() {
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var nowTime;

        nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };

    function fillZero(str) {
        var realNum;
        if (str < 10) {
            realNum = '0' + str;
        } else {
            realNum = str;
        }
        return realNum;
    }

    setInterval(getTime, 1000);

</script>


</body>

<script type="text/javascript">

    //全局定义一次, echarts  , 引入图表 js
    layui.config({
        base: "{%static '/layui/echarts5.3.3/' %}"  //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        echarts: 'echarts'
    });

    layui.use(['form', 'layer', 'table', "echarts", 'laytpl', 'laydate', 'carousel'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laytpl = layui.laytpl,
            table = layui.table,
            carousel = layui.carousel,
            laydate = layui.laydate;
        var echarts = layui.echarts;

        var chartZhu = echarts.init(document.getElementById('main1'));

        //声明一个 全屏显示的echarts图表
        var chartScreen = null;

        //指定图表配置项和数据
        var optionChart = {
            title: {
                text: '今日流量趋势',
                x: 'center',
                textStyle: {
                    fontSize: 14
                }
            },
            tooltip: {
                trigger: 'axis',

                show: true
            },
            toolbox: {// 工具栏
                itemSize: 16,
                showTitle: false,
                right: 24,
                feature: {
                    saveAsImage: {},
                    myTool: {//自定义工具 myTool
                        show: true,
                        title: '全屏显示',
                        icon: "path://M708.2 792.2l-97.5-97.7c-11.6-11.6-11.6-30.3 0-41.9l41.9-41.9c11.6-11.6 30.3-11.6 41.9 0l97.6 97.6 85.3-85.3c11.6-11.6 30.3-11.6 41.9-0.1 5.6 5.6 8.7 13.1 8.7 21v254.4c0 16.4-13.3 29.6-29.6 29.6H643.9c-16.4 0-29.6-13.3-29.6-29.6 0-7.8 3.1-15.4 8.6-20.9l85.3-85.3v0.1zM234 708.1l97.5-97.6c11.6-11.6 30.3-11.6 41.9 0l41.9 41.9c11.6 11.6 11.6 30.3 0 41.9l-97.6 97.6 85.3 85.3c11.6 11.6 11.5 30.4-0.1 41.9-5.6 5.5-13.1 8.6-20.9 8.6H127.7c-16.4 0-29.6-13.3-29.6-29.6V643.7c0-16.4 13.3-29.6 29.6-29.6 7.9 0 15.4 3.1 21 8.7l85.3 85.3zM792 318l-97.6 97.6c-11.6 11.6-30.3 11.6-41.9 0l-41.8-41.8c-11.6-11.6-11.6-30.3 0-41.9l97.6-97.6L623 149c-11.6-11.6-11.5-30.4 0.1-41.9 5.6-5.5 13.1-8.6 20.9-8.6h254.4c16.4 0 29.6 13.3 29.6 29.6v254.4c0 16.4-13.3 29.6-29.6 29.6-7.9 0-15.4-3.1-21-8.7L792 318z m-474.3-83.9l97.6 97.6c11.6 11.6 11.6 30.3 0 41.9l-42 42c-11.6 11.6-30.3 11.6-41.9 0L233.8 318l-85.3 85.3c-11.6 11.6-30.4 11.5-41.9-0.1-5.6-5.6-8.7-13.1-8.6-21V127.8c0-16.4 13.3-29.6 29.6-29.6H382c16.4 0 29.6 13.3 29.6 29.6 0 7.9-3.1 15.4-8.7 21l-85.2 85.3z",
                        //此处 图片路径前面必须加字符串  "image://"
                        // https://icon-icons.com/search/icons/?filtro=%E5%85%A8%E5%B1%8F
                        onclick: function () {
                            //生成全屏显示的图表
                            if (setFullScreenToolBox(optionChart)) {
                               // console.log(chartScreen)
                                getChartData(chartScreen);
                            }
                        }
                    }
                }
            },
            legend: {
                data: ['', '']
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: ['06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30']
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: 'PV',
                type: 'line',
                smooth: true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data: [111, 222, 333, 444, 555, 666, 3333, 33333, 55555, 66666, 33333, 3333, 6666, 11888, 26666, 38888, 56666, 42222, 39999, 28888, 17777, 9666, 6555, 5555, 3333, 2222, 3111, 6999, 5888, 2777, 1666, 999, 888, 777]
            }, {
                name: 'UV',
                type: 'line',
                smooth: true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data: [11, 22, 33, 44, 55, 66, 333, 3333, 5555, 12666, 3333, 333, 666, 1188, 2666, 3888, 6666, 4222, 3999, 2888, 1777, 966, 655, 555, 333, 222, 311, 699, 588, 277, 166, 99, 88, 77]
            }]
        }
        chartZhu.setOption(optionChart, true);

        function getChartData(chartScreen) {
            chartScreen.setOption(optionChart, true);
            //console.log("sssdfsd")


        }

        //全屏显示 toolbox回调
        //@param option   echarts的配置项
        function setFullScreenToolBox(optionChart) {
            if ($('#fullScreenMask').css('display') === 'block') {
                $('#fullScreenMask').hide();
                ChartScreen = null;
                return false;
            }

            $('#fullScreenMask').show();
            chartScreen = echarts.init(document.getElementById('fullScreen'));
            chartScreen.setOption(optionChart);
            chartScreen.setOption({
                toolbox: {
                    feature: {
                        myTool: {
                            title: '退出全屏',
                            icon: "path://M19.84,23.38H17.79a.5.5,0,0,0-.5.5v4a.5.5,0,0,0,.5.5H27.88a.5.5,0,0,0,.5-.5V17.79a.5.5,0,0,0-.5-.5h-4a.5.5,0,0,0-.5.5v2.05l-7-7a.48.48,0,0,0-.7,0l-2.83,2.83a.48.48,0,0,0,0,.7Z M15.67,51.16a.48.48,0,0,0,.7,0l7-7v2.05a.5.5,0,0,0,.5.5h4a.5.5,0,0,0,.5-.5V36.12a.5.5,0,0,0-.5-.5H17.79a.5.5,0,0,0-.5.5v4a.5.5,0,0,0,.5.5h2.05l-7,7a.48.48,0,0,0,0,.7Z M36.12,28.38H46.21a.5.5,0,0,0,.5-.5v-4a.5.5,0,0,0-.5-.5H44.16l7-7a.48.48,0,0,0,0-.7l-2.83-2.83a.48.48,0,0,0-.7,0l-7,7V17.79a.5.5,0,0,0-.5-.5h-4a.5.5,0,0,0-.5.5V27.88A.5.5,0,0,0,36.12,28.38Z M36.12,46.71h4a.5.5,0,0,0,.5-.5V44.16l7,7a.48.48,0,0,0,.7,0l2.83-2.83a.48.48,0,0,0,0-.7l-7-7h2.05a.5.5,0,0,0,.5-.5v-4a.5.5,0,0,0-.5-.5H36.12a.5.5,0,0,0-.5.5V46.21A.5.5,0,0,0,36.12,46.71Z",
                        }
                    }
                }
            });
            return true;
        }


        window.addEventListener("resize", () => {
            if (!this.chartScreen) {
                return;
            }
            this.chartScreen.resize();
        });

        ////////////// 全屏结束 注意 option 和 chart 的名称


        ////
        var chartZhu1111 = echarts.init(document.getElementById('main2'));
        //指定图表配置项和数据
        var optionChart1111 = {
            title: {
                text: '访客浏览器分布',
                x: 'center',
                textStyle: {
                    fontSize: 14
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['Chrome', 'Firefox', 'IE 8.0', 'Safari', '其它浏览器']
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: [
                    {value: 9052, name: 'Chrome'},
                    {value: 1610, name: 'Firefox'},
                    {value: 3200, name: 'IE 8.0'},
                    {value: 535, name: 'Safari'},
                    {value: 1700, name: '其它浏览器'}
                ]
            }]
        }

        chartZhu1111.setOption(optionChart1111, true);


        ////
        var chartZhu2222 = echarts.init(document.getElementById('main3'));
        //指定图表配置项和数据
        var optionChart222 = {
            title: {
                text: '最近一周新增的用户量',
                //x: 'center',  // 居中显示
                textStyle: {
                    fontSize: 14
                }
            },
            tooltip: { //提示框
                trigger: 'axis',

            },
            legend: {
                data: ['Email', 'Search Engine']
            },
            toolbox: {    // 保存图片
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: [{ //X轴
                type: 'category',
                data: ['11-07', '11-08', '11-09', '11-10', '11-11', '11-12', '11-13']
            }],
            yAxis: [{  //Y轴
                type: 'value'
            }],
            series: [
                { //内容
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [200, 300, 400, 610, 150, 270, 380],
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        }
        chartZhu2222.setOption(optionChart222, true);


        var chartZhu6666 = echarts.init(document.getElementById('main5'));
        const labelOption = {
            show: true,
            position: "insideBottom",
            distance: 19,
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
                name: {}
            }
        };

        var optionChart6666 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['生产量', '销量', '库存量']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: ['period001', 'period002', 'period003', 'period004', 'period005']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '生产量',
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 332, 301, 334, 390]
                },
                {
                    name: '销量',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290]
                },
                {
                    name: '库存量',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 232, 201, 154, 190]
                },
            ]
        };
        chartZhu6666.setOption(optionChart6666, true);

        //////
        var chartZhu8888 = echarts.init(document.getElementById('main6'));
        var optionChart8888 = {

            backgroundColor: '#fcfdff',
            series: [
                {
                    type: 'gauge',
                    radius: '82%',
                    min: 0,
                    max: 100,
                    startAngle: 90,
                    endAngle: -270,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 4,
                            color: [[1, 'rgba(76,99,112,0.3)']],
                        },
                    },
                    axisTick: {
                        // 刻度
                        show: true,
                        splitNumber: 10,
                        length: 16,
                        distance: -20,
                        lineStyle: {
                            width: 2,
                            color: 'rgba(245,6,42,0.3)',
                        },
                    },
                    splitLine: {
                        // 分割线
                        show: false,
                    },
                    axisLabel: {
                        // 刻度标签
                        show: false,
                    },
                    pointer: {
                        // 仪表盘指针
                        show: false,
                    },
                    detail: {
                        // 仪表盘详情
                        show: false,
                    },
                },

                {
                    type: 'gauge',
                    radius: '75%',
                    startAngle: 90,
                    endAngle: -270,
                    pointer: {
                        show: false,
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: true,
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#f5b20a',
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            width: 40,
                            color: [[1, 'rgba(17, 136, 255, .1)']],
                        },
                    },
                    splitLine: {
                        show: false,
                        distance: 0,
                        length: 10,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                        distance: 50,
                    },
                    data: [
                        {
                            value: 88.88,
                            name: '指标1',
                            title: {
                                offsetCenter: ['0%', '-52%'],
                            },
                            detail: {
                                offsetCenter: ['0%', '-39%'],
                            },
                            itemStyle: {
                                color: '#46f',
                            },
                        },

                        {
                            value: 45.33,
                            name: '指标2',
                            title: {
                                offsetCenter: ['0%', '-12%'],
                            },
                            detail: {
                                offsetCenter: ['0%', '1%'],
                            },
                            itemStyle: {
                                color: '#049f24',
                            },
                        },

                        {
                            value: 20,
                            name: '指标3',
                            title: {
                                offsetCenter: ['0%', '28%'],
                            },
                            detail: {
                                offsetCenter: ['0%', '40%'],
                            },
                            itemStyle: {
                                color: '#b711e5',
                            },
                        },
                    ],
                    title: {
                        fontSize: 14,
                        fontFamily: ['pingfang sc', 'serif', 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei'],
                        color: '#e70b0b',
                    },
                    detail: {
                        width: 50,
                        height: 14,
                        fontSize: 14,
                        fontFamily: ['pingfang sc', 'serif', 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei'],
                        color: 'auto',
                        borderColor: 'auto',
                        borderRadius: 20,
                        borderWidth: 0.6,
                        formatter: '{value}%',
                    },
                },
            ],
        };

        chartZhu8888.setOption(optionChart8888, true);


        /////
        var chartZhu5555 = echarts.init(document.getElementById('main7'));
        var data = {
            title: ['合计', '派遣工', '正式工'],
            dismissionNum: [558, 545, 13],
            dismissionRate: [17.7, 31.6, 0.9],
        };

        function getTableLine(num) {
            var list = [];
            var bottom = 80;
            var height = 40;
            for (var i = 0; i < num; i++) {
                list.push({
                    type: 'line',
                    bottom: bottom - i * height,
                    left: 15,
                    style: {
                        fill: '#333',
                        stroke: '#d5d5d5',
                    },
                    shape: {
                        x1: 0,
                        y1: 0,
                        x2: 1087,
                        y2: 0
                    }

                });
            }
            return list;
        }

        var lineList = getTableLine(2);


        var optionChart5555 = {
            title: [
                {
                    text: '单位：人',
                    right: '1%',
                    top: '1%',
                    textStyle: {
                        fontSize: 14,
                        color: '#9d9d9d',
                        fontWeight: 'lighter',
                    },
                },
                {
                    text: '本月',
                    left: '1%',
                    top: '1%',
                    textStyle: {
                        fontSize: 16,
                        color: '#9d9d9d',
                        fontWeight: 'bold',
                    },
                },
                {
                    text: '  \n项目\n离职人数',
                    bottom: 30,
                    left: 32,
                    textStyle: {
                        lineHeight: 40,
                        fontSize: 14,
                        fontWeight: 'normal',
                        formatter: function (value) {
                            return '{table|' + value + '}';
                        },
                        rich: {
                            table: {
                                align: 'center'
                            }
                        }
                    }
                }],
            grid: {
                bottom: 125,
                left: 120,
                right: 20,
                top: '12%',
            },
            xAxis: [{
                type: 'category',
                boundaryGap: true,
                data: data.title,
                axisLine: {
                    lineStyle: {
                        color: '#d5d5d5', // 更改坐标轴颜色
                    }
                },
                axisTick: {
                    length: 85, // 竖线的长度
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#333',
                    },
                    formatter: function (value, index) {
                        var indexNum = 0;
                        for (var i = 0; i < data.title.length; i++) {
                            if (value == data.title[i]) {
                                indexNum = i;
                            }
                        }
                        return '{table|' + value +
                            '}\n{table|' + data.dismissionNum[indexNum] + '}';
                    },
                    rich: {
                        table: {
                            lineHeight: 40,
                            align: 'center',
                            fontSize: 14, // table里文字字体大小
                        }
                    }
                }
            }],
            yAxis: [
                {
                    type: 'value',
                    scale: true,
                    maxInterval: 7, // 自动计算的坐标轴最小间隔大小。
                    //   splitNumber : 5,
                    silent: false, // 坐标轴是否是静态无法交互
                    max: 35,
                    min: 0,
                    axisLine: {
                        show: true,
                        lineStyle: { // 刻度线的样式设置。
                            color: '#d5d5d5', // 刻度线的颜色
                            width: 1,
                            type: 'solid',
                        },
                    },
                    axisTick: {
                        show: true,
                        inside: true, // 坐标轴刻度是否朝内，默认朝外。
                        lineStyle: { // 刻度线的样式设置。
                            color: '#d5d5d5', // 刻度线的颜色
                            width: 1,
                            type: 'solid',
                        },
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        formatter: '{value} %',
                        color: '#191919',
                        fontWeight: 'bold',
                        fontSize: 14,
                    }

                },
            ],
            series: [
                {
                    name: '离职率',
                    type: 'bar',
                    barWidth: 46,
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#eb6776', '#3cadfd', '#fdad3c'];
                                return colorList[params.dataIndex];
                            },
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c} %',
                                textStyle: {  //数值样式
                                    fontSize: 14,
                                    color: 'auto',
                                }
                            },
                        },

                    },
                    yAxisIndex: 0,
                    data: data.dismissionRate
                },
            ],
            graphic: lineList
        };


        chartZhu5555.setOption(optionChart5555, true);


        //////
        var chartZhu4444 = echarts.init(document.getElementById('main33'));
        //指定图表配置项和数据
        const pointerData = 90; // 仪表指针数据
        var optionChart4444 = {
            backgroundColor: "#fff",
            series: [{
                type: "gauge",
                radius: 150,
                z: 1,
                startAngle: 225,
                endAngle: -45,
                splitNumber: 50,
                title: {
                    color: 'red',
                },
                splitLine: {
                    show: true,
                    length: 15,
                    distance: -10,
                    lineStyle: {
                        color: "#fff",
                        width: 1
                    }
                },
                detail: {
                    show: true,
                    offsetCenter: [0, 60],
                    fontSize: 22,
                    formatter: val => [`{a|${val}}`, `{b|% test}`].join(''),    // ${val}  控制的是 指针 下面的 数值
                    rich: {
                        a: {
                            fontSize: 20,
                            color: 'rgba(84, 108, 198, 0.65)',
                        },
                        b: {
                            fontSize: 20,
                            color: 'rgba(84, 108, 198, 0.65)',
                        }
                    },
                },
                // 仪表盘的线，颜色值为一个数组
                axisLine: {
                    show: true,
                    // 两端是否设置为圆角；在5.0之后的版本有效
                    roundCap: false,
                    lineStyle: {
                        width: 15,
                        shadowColor: '#0093ee', //默认透明
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        opacity: 1,
                        color: [
                            [pointerData / 100, {    // pointerData / 100  为 仪表盘 上的 值
                                x: 0,
                                y: 0,
                                x1: 1,
                                y1: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 255, 0.6)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 0, 255, .6)'
                                }]
                            }],
                            [1, "rgba(0,0,0,0.15)"]
                        ]
                    }
                },
                // 仪表盘刻度标签
                axisLabel: {
                    show: true,
                    color: "rgba(84, 108, 198, 0.65)",
                    fontSize: 14,
                    distance: 20,
                    formatter: val => {
                        const num = Math.floor(val);
                        return num % 20 === 0 ? num : "";
                    }
                },
                // 刻度
                axisTick: {
                    show: false
                },
                // 指针，此设置仅对5.0以上的版本生效
                anchor: {
                    show: true,
                    icon: "circle",
                    showAbove: true,
                    size: 20,
                    itemStyle: {
                        borderWidth: 6,
                        borderColor: "rgba(84, 108, 198, 0.85)"
                    }
                },
                data: [pointerData]
            },
                {
                    // 背景渐变色
                    type: "pie",
                    radius: "80%",
                    // 不响应及触发鼠标事件
                    silent: true,
                    // 关闭背景动画
                    animation: false,
                    z: 0,
                    itemStyle: {
                        color: {
                            type: "radial", // 径向渐变
                            x: 0.5,
                            y: 0.5,
                            r: 0.25,
                            colorStops: [{
                                offset: 0,
                                color: "rgba(84, 103, 198, 0.6)"
                            },
                                {
                                    offset: 0.1,
                                    color: "rgba(84, 103, 198, 0.35)"
                                },
                                {
                                    offset: 1,
                                    color: "rgba(84, 103, 198, 0)"
                                }
                            ]
                        }
                    },
                    data: [pointerData]
                }
            ]
        };
        chartZhu4444.setOption(optionChart4444, true);


        //////
        var chartZhu7777 = echarts.init(document.getElementById('main333'));

        var xData = (function () {
            var data = ['11.29', '11.30', '12.01', '12.02', '12.03', '12.04'];
            return data;
        })();

        var optionChart7777 = {
            backgroundColor: '#0c1f50',
            legend: {

                data: ['待解决', '已解决', '已关闭', '累计task数'],
                left: 'center',
                top: 30,
                itemWidth: 16.7,
                itemHeight: 7.6,
                type: 'plain',
                textStyle: {
                    color: 'RGBA(154, 209, 253, 1)',
                },
            },
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                borderWidth: 0,
                top: 100,
                bottom: 80,
                left: 55,
                right: 25,
                textStyle: {
                    color: '#fff',
                },
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)',
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitArea: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        color: 'rgba(255,255,255,0.7)',
                        fontSize: 10,
                    },
                    data: xData,
                },
            ],
            yAxis: [
                {
                    name: '个',
                    nameTextStyle: {
                        color: '#FDFDFD',
                        padding: [0, 0, 0, -50],
                    },
                    nameGap: 15,
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'RGBA(3, 75, 97, 0.4)',
                        },
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        color: 'rgba(255,255,255,0.5)',
                        fontSize: 10,
                        formatter: (value) => {
                            return Math.abs(value);
                        },
                    },
                    splitArea: {
                        show: false,
                    },
                },
            ],
            series: [
                {
                    name: '待解决',
                    type: 'bar',
                    stack: '1',
                    barMaxWidth: 15,
                    barGap: '10%',
                    itemStyle: {
                        normal: {
                            barBorderRadius: 5,

                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#956FD4'},
                                {offset: 1, color: '#3EACE5'},
                            ]),
                        },
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        distance: 10,
                        color: '#fff',
                        fontSize: '10px',
                    },
                    data: [3, 2, 5, 4, 2, 1],
                },


                {
                    name: '已解决',
                    type: 'bar',
                    stack: '1',
                    barMaxWidth: 20,
                    barGap: '10%',
                    itemStyle: {
                        normal: {
                            barBorderRadius: 5,

                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0.5, color: 'rgba(149,111,211,0.5)'},
                                {offset: 0, color: 'rgba(149,111,211,0.3)'},
                                {offset: 1, color: 'rgba(149,111,211,0)'},
                            ]),
                        },
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        distance: 10,
                        color: '#fff',
                        fontSize: '10px',
                    },
                    data: [5, 3, 4, 2, 1, 5],
                },
                {
                    name: '已关闭',
                    type: 'bar',
                    stack: '1',
                    barMaxWidth: 20,
                    barGap: '10%',
                    itemStyle: {
                        normal: {
                            barBorderRadius: 5,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0.3, color: 'rgba(62,172,229,0.6)'},
                                {offset: 0.5, color: 'rgba(62,172,229,0.3)'},
                                {offset: 1, color: 'rgba(62,172,229,0.1)'},
                            ]),
                        },
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        distance: 10,
                        color: '#fff',
                        fontSize: '10px',
                        formatter: (value) => {
                            return Math.abs(value.data);
                        },
                    },
                    data: [-3, -4, -4, -3, -2, -1],
                },
                {
                    name: '累计task数',
                    type: 'line',
                    symbolSize: 3,
                    symbol: 'emptyCircle',
                    itemStyle: {
                        normal: {
                            color: '#FFC130',
                            barBorderRadius: '100%',
                        },
                        borderWidth: 0,
                    },
                    smooth: true,
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#FF8B77', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#FE6AAC', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                    },
                    data: [11, 9, 13, 9, 5, 7],
                },
            ],
        };

        chartZhu7777.setOption(optionChart7777, true);


    });
</script>
</html>


